<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/demo.css">
    <script type="text/javascript" src="./jquery-easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="./js/common/common.js"></script>
    <script src="./js/common/loader.js"></script>
    <script src="./js/common/url.js"></script>
    <style type="text/css">
    #dlg span {
        width: 400px;
    }
    
    #dlg label {
        width: 100px;
    }
    </style>
    <script type="text/javascript ">
    // var baseUrl = 'http://115.29.136.190:8080/help';
    var url = '';

    function doSearch() {
        var val = $('#cc').combobox('getValue');

        $('#tt').datagrid('load', {
            deptId: val,
            // deptName: $('#deptName').val()
        });
    }

    function newDept() {
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '添加新部门');
        $('#fm').form('clear');
        $('#fm_deptId').textbox('readonly', false);
        $('#fm_deptName').textbox('readonly', false);

        url = baseUrl + 'base/dept/add.do';
    }

    function saveDept() {
        var data = $("#fm").serializeObject();
        console.log(data)
        console.log(url)
        if ($("#fm").form('validate')) {
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(result) {
                    if (result.status == 1) {
                        $('#dlg').dialog('close'); // close the dialog
                        $('#tt').datagrid('reload'); // reload the user data
                    } else {
                        $.messager.show({ // show error message
                            title: 'Error',
                            msg: result.message
                        });
                    }
                }
            })
        };

    }

    function editDept() {
        var row = $('#tt').datagrid('getSelected');
        console.log(row);
        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑部门');
            console.log(row);
            $('#fm').form('load', row);
            $('#fm_deptId').textbox('readonly', true);
            $('#fm_deptName').textbox('readonly', true);
            url = baseUrl + 'base/dept/update.do';
            // url='http://115.29.136.190:8080/help/base/dept/update.do'
            console.log(url)
        }
    }

    function destroyDept() {
        var row = $('#tt').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '你确定要删除该部门吗？', function(r) {
                if (r) {
                    var query = {
                        deptId: row.deptId
                    }
                    $.ajax({
                        type: "POST",
                        url: baseUrl + '/base/dept/delete.do',
                        data: JSON.stringify(query),
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        success: function(result) {
                            if (result.status == 1) {
                                $('#tt').datagrid('reload'); // reload the user data
                            } else {
                                $.messager.show({ // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        }
                    })
                }
            });
        }
    }
    $(function() {
        $('#tt').datagrid({
            title: '添加部门/学院，删除部门/学院，以及更改部门/学院的设岗数量',
            iconCls: 'icon-edit',
            width: "100%",
            height: "auto",
            rownumbers:true,
            fit: true,
            singleSelect: true,
            idField: 'deptId',
            url: baseUrl+'base/dept/list1.do',
            pagination: true,
            pageSize: 30,
            pageList: [5, 10, 15, 20,25,30],
            method: 'post',
            columns: [
                [ {
                    field: 'deptId',
                    title: '学院／部门ID',
                    align: 'center',
                    width: "30%"
                }, {
                    field: 'deptName',
                    title: '学院／部门名称',
                    width: "40%",
                    align: 'center',
                    // editor: 'text'
                }, {
                    field: 'jobNum',
                    title: '岗位数量',
                    align: 'center',
                    width: "30%",
                    // editor: 'textbox'
                }]
            ],
            toolbar: '#toolbar',
            onDblClickRow: function() {
                editDept()
            }
        });
        $('#cc').combobox({
            url: url_queryDept,
            valueField: 'deptId',
            textField: 'deptName',
            method: 'post',
            multiple: false,
            loader: cloader,
            panelHeight: 200,
        })
    });
    </script>
</head>

<body>
    <!-- <h2>部门/学院管理系统</h2> -->
    <!-- <p></p> -->
    <div id="toolbar">
        <div style="padding:3px">
<!--             <span>部门 ID:</span>
            <input id="deptId" style="line-height:26px;border:1px solid #ccc"> -->
            <span>部门名称:</span>
            <input id='cc' name='deptName' value="">
            <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="doSearch()">查询</a>
        </div>
        <div>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newDept()">添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDept(' + index + ')">编辑</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyDept()">删除</a>
        </div>
    </div>
    <table id="tt"></table>
    <div id="dlg" class="easyui-dialog" style="width:500px" closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">学院/部门信息</div>
            <div style="margin-bottom:10px">
                <input id="fm_deptId" name="deptId" class="easyui-textbox" required="true" label="学院/部门编号:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input id="fm_deptName" name="deptName" class="easyui-textbox" required="true" label="学院/部门名称:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="jobNum" class="easyui-numberbox" required="true" label="岗位总数:" type="number" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveDept()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
</body>

</html>
